import React, { PureComponent } from 'react';
import moment from 'moment';
import { Table, Alert, Badge, Divider } from 'antd';
import styles from './index.less';

class RoleTable extends PureComponent {

  changePage = (pagination) => {
    this.props.onChange(pagination);
  }

  render() {
    const { data: { list, pagination }, loading,setPostValue,doDelete,permission  } = this.props;
    const columns = [
      {
        title: '角色id',
        dataIndex: 'roleId',
      },
      {
        title: '角色名称',
        dataIndex: 'roleName',
      },
      {
        title: '备注',
        dataIndex: 'remark',
      },
      {
        title: '更新时间',
        dataIndex: 'createTime',
        sorter: true,
        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
      },
    ];

    if(permission.edit||permission.delete){
      columns.push({
          title: '操作',
          filterDropdownVisible: false,
          render: (text, record, index) => (
            <div>
              <a onClick={() => setPostValue(record)} hidden={!permission.edit}>修改</a>
              <Divider type="vertical" hidden={!permission.edit}/>
              <a onClick={()=> doDelete(record.roleId)} hidden={!permission.delete}>删除</a>
            </div>
          ),
          
      });
    }

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
    };

    return (
      <div className={styles.standardTable}>
        <Table
          loading={loading}
          rowKey={record => record.roleId}
          // rowSelection={rowSelection}
          dataSource={list}
          columns={columns}
          pagination={paginationProps}
          onChange={this.changePage}
        />
      </div>
    );
  }
}

export default RoleTable;
